<script setup>
import { ref, onMounted } from 'vue'
import { getBuildingListAPI, createBuildingListAPI,editBuildingListAPI,delBuildingListAPI } from "../api/index"
import { ElMessage , ElMessageBox} from 'element-plus'

// 渲染
const buildingList = ref([])
const params = ref({
    name: '',
    page: 1,
    pageSize: 5
})
const total = ref()
const list = async () => {
    const res = await getBuildingListAPI(params.value)
    console.log(res)
    buildingList.value = res.data.rows
    total.value = res.data.total
}
console.log(buildingList)

onMounted(() => {
    list()
})
// 分页
const currentChange = (page) => {
    params.value.page = page
    list()
}
const dialogVisible = ref(false)
// 查询
const query = () => {
    console.log(123)
    params.value.page = 1
    list()
}
// 格式化
const formatter = (type) => {
    const API = {
        0: '空置中',
         1:'租赁中'
    }
    return API[type.status]
}
const from = ref({
    name: '',
    floors: null,
    area: null,
    propertyFeePrice: null
})
// 检验

const rules = ref({
    name: [
        { required: true, message: '请输入楼宇名称', trigger: 'blur' },
    ],
    floors: [
        { required: true, message: '请输入楼宇楼层', trigger: 'blur' },
    ],
    area: [
        { required: true, message: '请输入在管面积', trigger: 'blur' },
    ],
    propertyFeePrice: [
        { required: true, message: '请输入物业费', trigger: 'blur' },
    ],
})

// 清空
const remove = () => {
    from.value.id = ''
    from.value.name = ''
    from.value.floors = ''
    from.value.area = ''
    from.value.propertyFeePrice = ''
}
// 创建
const ruleFormRef = ref(null)
const submitForm = async (ruleFormRef) => {
    console.log(ruleFormRef.value)
    if (!ruleFormRef) return
    await ruleFormRef.validate(async (valid, fields) => {
        if (valid) {
            if (from.value.id) {
                await editBuildingListAPI(from.value)
                ElMessage({
                message: '编辑成功',
                center: true,
                })
            } else {
                await createBuildingListAPI(from.value)
                ElMessage({
                message: '添加成功',
                center: true,
                })
            }
            remove()
            list()
            dialogVisible.value = false 
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}
// 取消
const btn = () => {
    dialogVisible.value = false 
    from.value.id = ''
    from.value.name = ''
    from.value.floors = ''
    from.value.area = ''
    from.value.propertyFeePrice = ''
}
// 编辑
const enit = (row) => {
    dialogVisible.value = true
    console.log(row)
    const {
        name,
        floors,
        area,
        propertyFeePrice,
        id
    } = row
    from.value = {
        id,
        name,
        floors,
        area,
        propertyFeePrice
    }
}

// 删除
const del = (id) => {
   
    ElMessageBox.confirm(
    '您确定要删除吗?',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      await delBuildingListAPI(id)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      list()
    })
    .catch(() => {
      
    })
}
</script>
<template>
    <div>
       楼宇名称: <input v-model="params.name" type="text" style="margin-bottom: 20px;">
        <button @click="query">查询</button>
       <br/>
        <button @click="dialogVisible = true" class="btn">添加楼宇</button>
        <el-table :data="buildingList" style="width: 100%">
            <el-table-column type="index" label="序号" />
            <el-table-column prop="name" label="楼宇名称" />
            <el-table-column prop="floors" label="楼层" />
            <el-table-column prop="area" label="在管面积(m²)" />
            <el-table-column prop="propertyFeePrice" label="物业费(元/m²)" />
            <el-table-column prop="status" label="状态" :formatter="formatter"/>
            <el-table-column label="操作" width="120">
                <template #default="scpoe">
                    <el-button link type="primary" size="small" @click="enit(scpoe.row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="del(scpoe.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分 -->
        <el-pagination :page-size="params.pageSize" @current-change="currentChange" layout="prev, pager, next"
            :total="total" />
        <!-- 弹框 -->
        <el-dialog v-model="dialogVisible" title="添加楼宇" width="30%" :before-close="handleClose">

            <el-form ref="ruleFormRef" :model="from" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize" status-icon>
                <el-form-item label="楼宇名称" prop="name">
                    <el-input v-model="from.name" />
                </el-form-item>
                <el-form-item label="楼宇楼层" prop="floors">
                    <el-input v-model="from.floors" />
                </el-form-item>
                <el-form-item label="在管面积" prop="area">
                    <el-input v-model="from.area" />
                </el-form-item>
                <el-form-item label="物业费" prop="propertyFeePrice">
                    <el-input v-model="from.propertyFeePrice" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        确定
                    </el-button>
                    <el-button @click="btn">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<style  scoped>
.btn {
    width: 100px;
    height: 30px;
    background: #4770ff;
}
</style>
